<template>
  <div>
    <TopBar></TopBar>
    <SecondBar></SecondBar>
    <div class="singer-container">
      <span class="singer-name">{{ artistInfo?.artist.name }}</span>
      <div class="img-div"></div>
      <div class="singer-tab">
        <ul>
          <li>
            <router-link :to="{ path: '/artist', query: { id } }"
              >热门作品</router-link
            >
          </li>
          <li>
            <router-link :to="{ path: '/artist/album', query: { id } }"
              >所有专辑</router-link
            >
          </li>
          <li>
            <router-link :to="{ path: '/artist/allmv', query: { id } }"
              >相关MV</router-link
            >
          </li>
          <li>
            <router-link :to="{ path: '/artist/info', query: { id } }"
              >艺人介绍</router-link
            >
          </li>
        </ul>
        <router-view></router-view>
      </div>
    </div>
    <songPlaying></songPlaying>
  </div>
</template>

<script lang="ts">
export default {
  name: "XArtist",
};
</script>

<script lang="ts" setup>
import TopBar from "@/layout/components/TopBar/index.vue";
import SecondBar from "@/layout/components/SecondBar/index.vue";
import songPlaying from "@/layout/components/songPlaying/index.vue";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getArtistInfoApi } from "@/api/artist/artist";

const route = useRoute();
const id = ref<any>(route.query.id);

const artistInfo = ref();
const bgUrl = ref();

const getArtistInfo = async (id: number) => {
  const res = await getArtistInfoApi(id);
  artistInfo.value = res.data;
  bgUrl.value = `url(${res.data.artist.cover})`;
};

onMounted(() => {
  getArtistInfo(id.value);
});
</script>

<style scoped>
.singer-container {
  width: 900px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #d3d3d3;
}
.img-div {
  width: 640px;
  height: 300px;
  background-image: v-bind(bgUrl);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.singer-name {
  font-size: 32px;
  font-weight: 500;
}
.singer-tab ul {
  display: flex;
  width: 640px;
  justify-content: space-evenly;
}
.singer-tab ul li {
  width: 100%;
  border: 1px solid #d3d3d3;
  padding: 8px 12px;
  text-align: center;
  font-size: 14px;
}
.singer-tab ul .active {
  border-bottom: 2px solid red;
}
</style>
